<template>
	<view class="container">
		<!-- 灰色背景区域 -->
		<view class="gray-background"></view>

		<!-- 新增游客弹窗 -->
		<view class="popup">
			<view class="popup-header">
				<text class="popup-title">新增游客</text>
				<text class="close-btn" @click="closePopup">×</text>
			</view>

			<view class="form-container">
				<view class="form-item">
					<text class="label">证件类型</text>
					<picker class="input" :range="idTypes" @change="onIdTypeChange">
						<text>{{ selectedIdType }}</text>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">真实姓名</text>
					<input class="input" placeholder="输入证件姓名" v-model="realName" />
				</view>

				<view class="form-item">
					<text class="label">证件号码</text>
					<input class="input" placeholder="输入证件号码" v-model="idNumber" />
				</view>

				<view class="form-item">
					<text class="label">联系手机号</text>
					<input class="input" placeholder="接收行程信息的手机号" v-model="phone" />
				</view>
			</view>

			<button class="save-btn" @click="saveInfo">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 证件类型选项
	const idTypes = ['居民身份证', '护照', '港澳通行证', '台湾通行证'];
	const selectedIdType = ref('居民身份证');

	// 表单数据
	const realName = ref('');
	const idNumber = ref('');
	const phone = ref('');

	// 证件类型选择变更
	const onIdTypeChange = (e) => {
		selectedIdType.value = idTypes[e.detail.value];
	};

	// 关闭弹窗
	const closePopup = () => {
		// 关闭弹窗的逻辑
		console.log('关闭弹窗');
	};

	// 保存信息
	const saveInfo = () => {
		// 保存表单数据的逻辑
		console.log('保存信息', {
			idType: selectedIdType.value,
			realName: realName.value,
			idNumber: idNumber.value,
			phone: phone.value
		});
	};
</script>

<style scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.gray-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #999;
	}

	.popup {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		padding: 20px;
		box-sizing: border-box;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.popup-title {
		font-size: 16px;
		font-weight: bold;
		margin-left: 50%;
		transform: translateX(-50%)
	}

	.close-btn {
		font-size: 20px;
		color: #999;
	}

	.form-container {
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.label {
		width: 80px;
		font-size: 14px;
		color: #333;
	}

	.input {
		flex: 1;
		font-size: 14px;
		color: #666;
		text-align: right;
	}

	.save-btn {
		width: 100%;
		height: 40px;
		background: linear-gradient(to right, #4e95ff, #66a5ff);
		color: white;
		border: none;
		border-radius: 20px;
		font-size: 16px;
	}
</style>